<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史评分 - 生活状态评分系统</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">生活状态评分系统</a>
            <div class="navbar-nav">
                <a class="nav-link" href="/judge">评分页面</a>
                <a class="nav-link" href="/manage">评分项管理</a>
                <a class="nav-link active" href="/history">历史评分</a>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>历史评分记录</h2>
            <div>
                <input type="date" class="form-control" id="dateSelect" onchange="loadHistory()">
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>选择</th>
                        <th>分数</th>
                        <th>日期</th>
                    </tr>
                </thead>
                <tbody id="historyContent">
                    <!-- 历史记录将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">每日总分统计</h5>
                    <div id="dailyTotal">
                        <!-- 每日总分将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/bootstrap.bundle.min.js"></script>
    <script>
        function loadHistory() {
            const date = document.getElementById('dateSelect').value;
            if (!date) return;

            fetch(`/api/history?date=${date}`)
                .then(response => response.json())
                .then(data => {
                    const content = document.getElementById('historyContent');
                    content.innerHTML = '';

                    if (data.length === 0) {
                        content.innerHTML = '<tr><td colspan="4" class="text-center">该日期没有评分记录</td></tr>';
                        return;
                    }

                    let totalScore = 0;
                    data.forEach(item => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${item.item_name}</td>
                            <td>${item.selected_option}</td>
                            <td>${item.score}</td>
                            <td>${item.date}</td>
                        `;
                        content.appendChild(row);
                        totalScore += item.score;
                    });

                    // 更新每日总分
                    const dailyTotal = document.getElementById('dailyTotal');
                    dailyTotal.innerHTML = `
                        <div class="alert alert-info">
                            <h4 class="alert-heading">${date} 总分</h4>
                            <p class="mb-0">${totalScore} 分</p>
                        </div>
                    `;
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('historyContent').innerHTML = 
                        '<tr><td colspan="4" class="text-center text-danger">加载历史记录失败</td></tr>';
                });
        }

        // 设置日期选择器的默认值为今天
        document.getElementById('dateSelect').valueAsDate = new Date();
        loadHistory();
    </script>
</body>
</html> 